<template>
  <div class="make-table-container">
    <div class="hd-box">
      <!-- <button @click="getCellMeta">获取配置</button> -->
      <!-- <a-input-search
      v-model:value="title"
      placeholder="title"
      enter-button="保存"
      :loading="nextLoading"
      @search="id ? modify() : preservation()" /> -->
      <input class="title-input" type="text" v-model="title" />
    </div>
    <div class="table-container">
      <div id="table-example"></div>
    </div>
    
  </div>
</template>
<script>
import Handsontable from 'handsontable';
import 'handsontable/languages/zh-CN';

import io from '@/utils/http/index.js';
import { message } from 'ant-design-vue';

let hotTable = null

export default {
  props: {
    showData: {
      type: Object,
    },
  },
  data () {
    return {
      id: null,
      type: 'table',
      title: '',
      subtitle: '',
      describe: '',
      data: null,
      config: {
        rowHeights: {},
        colWidths: {},
        mergeCells: []
      },
      apiConfig: null,
      dataSourceType: 0,

      nextLoading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init () {
      this.id = this.showData.id
      this.title = this.showData.title
      
      console.log(this.showData)

      const self = this
      hotTable = new Handsontable(document.getElementById('table-example'), {
        data: this.showData.data || null,
        startRows: 40,
        startCols: 18,
        rowHeaders: true,
        colHeaders: true,
        height: '100%',
        contextMenu: true,
        manualColumnFreeze: true,
        customBorders: true,
        manualColumnMove: true,
        manualColumnResize: true,
        manualRowResize: true,
        manualRowMove: true,
        language: 'zh-CN',
        licenseKey: 'non-commercial-and-evaluation',
        mergeCells: this.showData.config.mergeCells || [],
        rowHeights: (index) => {
          const rowHeights = this.showData.config.rowHeights
          return rowHeights && rowHeights[index] || null
        },
        colWidths: (index) => {
          const colWidths = this.showData.config.colWidths
          return colWidths && colWidths[index] || 100
        },

        afterColumnResize: (newSize, column) => {
          self.config['colWidths'][column] = newSize
          console.log(this.config)
        },

        afterRowResize: (newSize, column) => {
          self.config['rowHeights'][column] = newSize
        },

        afterMergeCells: () => {
          if (hotTable) {
            let merge = hotTable.getPlugin('MergeCells')
            self.config['mergeCells'] = merge ? hotTable.getPlugin('MergeCells').mergedCellsCollection.mergedCells : []
          }
        },

        // 单元格属性
        afterSetCellMeta: (row, column, key, value) => {
          console.log(row, column, key, value)
        }
      })
    },

    getCellMeta () {
      console.log(hotTable.getCellsMeta())
    },

    getRequest() {
      return {
        type: this.type,
        title: this.title,
        subtitle: this.subtitle,
        describe: this.describe,
        data: JSON.stringify(hotTable.getData()),
        config: JSON.stringify(this.config),
        dataSourceType: this.dataSourceType,
        apiConfig: JSON.stringify(this.apiConfig),
      };
    },

    // 保存
    preservation() {
      this.nextLoading = true;
      io({
        url: '/show/api/module',
        method: 'post',
        data: this.getRequest(),
      }).then((res) => {
        message.success('保存成功');
        this.id = res.data._id;
        this.nextLoading = false;
        this.$router.replace({ path: '/make/' + res.data._id, query: this.$route.query });
      })
      .catch((e) => {
        message.error(e.msg);
        this.nextLoading = false;
      });
    },

    // 修改
    modify() {
      this.nextLoading = true;
      io({
        url: '/show/api/module/' + this.id,
        method: 'put',
        data: this.getRequest(),
      }).then((res) => {
        message.success('修改成功');
        this.nextLoading = false;
      })
      .catch((e) => {
        message.error(e.msg);
        this.nextLoading = false;
      });
    },
  },
}
</script>
<style lang="scss">
.make-table-container {
  height: 100%;
  .hd-box {
    height: 50px;
    .title-input {
      border: 0;
      border-bottom: solid $border-color-base 1px;
      padding: 0 5px;
      width: 40%;
      height: 35px;
      font-size: 18px;
      background: #f5f6f8;
      outline: none;
      margin-top: 5px;
    }
  }
  
  .table-container {
    height: calc(100% - 50px);
  }
}
</style>